﻿function animate_text() {
    var current = parseInt($("#hiddenCurrentIndex").val());
    var $target = $("div[data-index=" + current + "]");

    switch (current) {
        case 0:
            var duration3 = 2000;
            $target.find("[img-index=1]").animate({ left: "0px", opacity: 1 }, duration3, function () {
                $target.find("[img-index=2]").animate({ left: "0px", opacity: 1 }, duration3, function () {
                });
            });
            break;

        case 1:
            var duration3 = 2000;
            $target.find("[img-index=1]").animate({ left: "0px", opacity: 1 }, duration3, function () {
                $target.find("[img-index=2]").animate({ left: "0px", opacity: 1 }, duration3, function () {
                    $target.find("[img-index=3]").animate({ right: "0px", opacity: 1 }, duration3, function () {
                    });
                });
            });
            break;

        case 2:
            var duration3 = 2000;
            $target.find("[img-index=1]").animate({ left: "0px", opacity: 1 }, duration3, function () {
                $target.find("[img-index=2]").animate({ left: "0px", opacity: 1 }, duration3, function () {
                    $target.find("[img-index=3]").animate({ left: "0px", opacity: 1 }, duration3, function () {
                        $target.find("[img-index=4]").animate({ left: "0px", opacity: 1 }, duration3, function () {
                            $target.find("[img-index=5]").animate({ left: "0px", opacity: 1 }, duration3, function () {
                            });
                        });
                    });
                });
            });
            break;

        case 3:
            var duration3 = 2000;
            $target.find("[img-index=1]").animate({ left: "0px", opacity: 1 }, duration3, function () {
                $target.find("[img-index=2]").animate({ left: "0px", opacity: 1 }, duration3, function () {
                    $target.find("[img-index=3]").animate({ left: "0px", opacity: 1 }, duration3, function () {
                    });
                });
            });
            break;

        default:
            break;
    }
}

function pageArrow(direction) {
    var $current = $("#hiddenCurrentIndex");
    var height = document.body.clientHeight;
    var $max = $("#hiddenMax");
    var current = parseInt($current.val());    

    for (var i = 0; i <= (parseInt($max.val()) - 1) ; i++) {
        var $target = $("div[data-index=" + i + "]");
        var newtop = 0;
        if (direction == "up") {
            newtop = (parseInt($target.css('top').replace('px', '')) - height) + "px";            
        }
        else {
            newtop = (parseInt($target.css('top').replace('px', '')) + height) + "px";            
        }
        $target.animate({ top: newtop });
    }

    if (direction == "up") {
        current = current + 1;
    }
    else {
        current = current - 1;
    }
    
    $current.val(current);

    animate_text();

    if (3 == current) {
        $(".arrow-down").hide();
    }
}

$(document).ready(function () {
    var height = document.body.clientHeight;
    var width = document.body.clientWidth;

    $("div[data-index]").each(function () {
        var $obj = $(this);
        $obj.css('top', (parseInt($obj.attr("data-index")) * height) + "px");
    });

    $(".arrow-down").click(function () {
        pageArrow("up");
    });

    animate_text();

    $(".back-x").css("width", width + "px").css("height", height + "px");

    //set video
    $(".video-pause").click(function () {
        document.getElementById("audioPlayer").play();
        $(this).hide().next().show();
    });

    $(".video-play").click(function () {
        document.getElementById("audioPlayer").pause();
        $(this).hide().prev().show();
    });


    var startX = 0, startY = 0;
    var moveEndX = 0, moveEndY = 0;
    var X = 0, Y = 0;

    $("body").on("touchstart", function (e) {
        e.preventDefault();
        startX = e.originalEvent.changedTouches[0].pageX,
        startY = e.originalEvent.changedTouches[0].pageY;
    });

    $("body").on("touchend", function (e) {

        e.preventDefault();
        moveEndX = e.originalEvent.changedTouches[0].pageX,
        moveEndY = e.originalEvent.changedTouches[0].pageY,
        X = moveEndX - startX,
        Y = moveEndY - startY;

        if (Math.abs(X) > Math.abs(Y) && X > 0) {
            //alert("left 2 right");
        }

        else if (Math.abs(X) > Math.abs(Y) && X < 0) {
            //alert("right 2 left");
        }

        else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
            //alert("top 2 bottom");            
            if (parseInt($("#hiddenCurrentIndex").val()) != 0) {
                pageArrow("down");
            }
        }

        else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
            //alert("bottom 2 top");            
            if (parseInt($("#hiddenCurrentIndex").val()) != 3) {
                pageArrow("up");
            }
        }

        else {
            //alert("just touch");
        }
    });

});